﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="陈旭光，Chen XuG,chenxvguang1991@163.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>基于Bootsharp的响应式网站</title>
    <link rel="shortcut icon" href="img/title.ico"/>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="style/main.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--            导航条           -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
        
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
              <img alt="honda" src="img/logo.gif" width='auto' height="100%" >
            </a>
          </div>
          
          <div class="collapse navbar-collapse" id="nav_1">

            <form class="navbar-form navbar-right form-inline" role="search">
                      <div class="form-group ">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search">
                        <div class="input-group-addon"><span  class="glyphicon glyphicon-search" aria-hidden='true' aria-label='sign_in'></span></div>
                        </div>
                      </div>
            </form> 

              <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="javascript:void(0);">首页</a></li>
                    <li ><a href="javascript:void(0);">汽车</a></li>
                    <li ><a href="javascript:void(0);">摩托车</a></li>
                    <li ><a href="javascript:void(0);">通用设备</a></li>
                    <li>
                      <button type="button" class="btn btn-default navbar-btn" data-container="body" data-toggle="popover" data-placement="bottom" data-content="未读消息：2">
                          <span  class="glyphicon glyphicon-user" aria-hidden='true' aria-label='sign_in'></span>
                          <span class="badge">2</span>
                      </button>
                    </li>
              </ul>
                 
          </div>
        </div>
</nav>
<!--            主体内容         -->
<section id='main' class="container-fluid">
<!--             轮播图           -->
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
<div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img/轮播1.jpg" alt="汽车">
        </div>
        <div class="item">
          <img src="img/轮播2.jpg" alt="摩托车">
        </div>
        <div class="item">
          <img src="img/轮播3.jpg" alt="通用设备">
        </div>
</div>

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>

<div class="jumbotron">
  <h1 id='ad'>F<span>|</span><br>&nbsp</h1>
  <p class="lead">卓越科技为驾乘带来多乐趣体验。<br>Honda的FUNTEC正源于此，以先进的环保技术、安全技术、舒适技术，带来无尽的驰享乐趣。</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<!--          媒体中心           -->
<div class="row row1">
    <div class="col-sx-12 title">
        <h3>媒体中心<a class="btn btn-default  btn-sm pull-right" href="javascript:void(0);" role="button">新闻一览></a>
        </h3>
    </div>
    <div class="col-md-6 " id='col1'>
         <video poster="http://www.honda.com.cn/upload_files/movie/img_thumbnail_42.jpg" src="http://www.honda.com.cn/upload_files/movie_mp4/mov051_CHINA.mp4" width="100%" height="auto" controls=""></video> 
    </div>
    <div class="col-md-6" id='col2'>
          <div class="row">
                 <div class="col-xs-6">
                        <div class="thumbnail">
                              <img src="img/img_topics_822.jpg" >
                              <div class="caption">
                              <p><a>碰撞实验验证SPORT HYBRID…</a></p>
                            </div>
                        </div>
                 </div>
                 <div class="col-xs-6">
                              <div class="thumbnail">
                                      <img src="img/img_topics_821.jpg" >
                                      <div class="caption">
                                      <p><a>HondaDreamWing 成都站…</a></p>
                                    </div>
                              </div>
                      </div>
          </div>
          <div class="row">
                  <div class="col-sx-12">
                        <a href="javascript:void(0);">2016.07.04&nbsp&nbsp&nbsp近日，Honda所属研究开发子公司株式会社：本田技术研究所与软银...</a>
                        <a href="javascript:void(0);">2016.07.03&nbsp&nbsp&nbspHonda所属研究开发子公司株式会社：本田技术研究所与软银启动...</a>
                        <a href="javascript:void(0);">2016.07.02&nbsp&nbsp&nbsp东风本田汽车有限公司根据《缺陷汽车产品召回管理条例》的要求...</a>
                        <a href="javascript:void(0);">2016.07.01&nbsp&nbsp&nbsp今年4月的中国（北京）国际汽车展览会上，搭载Honda先进 SPORT...</a>
                  </div>
          </div>
    </div> 
</div>
<!--       内容一览       -->
<div class="row row2">
    <div class="col-sx-12 title" >
        <h3>内容一览</h3>
    </div>
    <div class="col-sm-4">
            <a class="conPic" href="javascript:void(0)"  style='display: block;background:url(img/bg0.jpg) 0 0 no-repeat;background-size: cover'>
                    <h3>汽车</h3>
                    <h5>AUTOMOBILES</h5>
            </a>
    </div>
    <div class="col-sm-4">
            <a class="conPic" href="javascript:void(0)"  style='display: block;background:url(img/bg1.jpg) 0 0 no-repeat;background-size: cover'>
                    <h3>摩托车</h3>
                    <h5>MOTORCYCLES</h5>
            </a>
    </div>
    <div class="col-sm-4">
            <a class="conPic" href="javascript:void(0)"  style='display: block;background:url(img/bg2.jpg) 0 0 no-repeat;background-size: cover'>
                    <h3>通用产品</h3>
                    <h5>POWER PRODUCTS</h5>
            </a>
    </div>
     <div class="col-sm-4">
            <a class="conPic" href="javascript:void(0)"  style='display: block;background:url(img/bg3.jpg) 0 0 no-repeat;background-size: cover'>
                    <h3>新领域</h3>
                    <h5>TECHNOLOGY</h5>
            </a>
    </div>
    <div class="col-sm-4">
            <a class="conPic" href="javascript:void(0)"  style='display: block;background:url(img/bg4.jpg) 0 0 no-repeat;background-size: cover'>
                    <h3>赛事</h3>
                    <h5>MOTOR SPORTS</h5>
            </a>
    </div>
    <div class="col-sm-4">
            <a class="conPic" href="javascript:void(0)"  style='display: block;background:url(img/bg5.jpg) 0 0 no-repeat;background-size: cover'>
                    <h3>企业信息</h3>
                    <h5>COMPANY</h5>
            </a>
    </div>
</div>
</section>
<!--      底部      -->
<footer>
  <div class="container-fluid">
      <div class="row">
          <div class="col-sm-6">
              <form class="form-horizontal">
              <div class="form-group">
                <label for="Name"  class="col-sm-3 col-md-3 control-label">姓名</label>
                <div class="col-sm-8 col-md-6">
                        <input type="text" class="form-control" id="Name" placeholder="name">
                      </div>
              </div>
                  <div class="form-group">
                      <label for="Email" class="col-sm-3 col-md-3 control-label">邮箱</label>
                      <div class="col-sm-8 col-md-6">
                        <input type="email" class="form-control" id="Email" placeholder="Email">
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="Password" class="col-sm-3 col-md-3 control-label">密码</label>
                      <div class="col-sm-8 col-md-6">
                        <input type="password" class="form-control" id="Password" placeholder="Password">
                      </div>
                  </div>
                  <div class="form-group">
                      <div class="col-sm-offset-3  col-sm-6">
                        <div class="checkbox">
                          <label>
                            <input type="checkbox"> 记住我
                          </label>
                        </div>
                    </div>
                  </div>
                  <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-6">
                          <button type="submit" class="btn btn-default">登录</button>
                        </div>
                  </div>
              </form>
          </div>
          <div class="col-sm-6">
              <div id='fterRowRight'>
                      <h5><img src="img/honda_logo.gif"></h5>
                      <h5>&nbsp</h5>
                      <h5>&nbsp</h5>
                      <h5><a href="javascript:void(0)">联系我们</a></h5>
                      <h5><img src="img/logofooter.gif"></h5>
              </div>
          </div>
      </div>

  </div>

</footer>

<script type="text/javascript">
      $(function(){
  var adSpan=true;
  var adStr='F';
  var adNum=0;
  var biaoYu=['U','N','T','E','C',' ','S','A','F','E','T','Y','<br> ','你','，','最','珍','贵','。']
  //个人中心消息窗显示
  $('[data-toggle="popover"]').popover();
  //广告语播出效果
  setInterval(function(){

    if(adNum%24==0){
      adStr='F';
      $('#ad').html(adStr+'<span>|</span><br>&nbsp');
    }
    else if(adNum%24<=19&&adNum%24>0){
      adStr+=biaoYu[adNum%24-1];
      if(adNum%24<13&&adNum%24>0){
        $('#ad').html(adStr+'<span>|</span><br>&nbsp');
      }
      else if(adNum%24>=13&&adNum%24<=19){
        $('#ad').html(adStr+'<span>|</span>');
      }
    }
    else{
      adStr=adStr;
      $('#ad').html(adStr+'<span>|</span>');
    };
    adNum++;

    if(adSpan){
      $('#ad>span').css('display','none');
      adSpan=false;
    }
    else if(!adSpan){
      $('#ad>span').css('display','inline');
      adSpan=true;
    }

  },300);
  //媒体中心列相等
  if($(document).width()>=992){$('#col2').height($('#col1').height());}
  $('.conPic').height($('.conPic').width());
  $(window).resize(function() {
    if($(document).width()>=992){$('#col2').height($('#col1').height());}
    $('.conPic').height($('.conPic').width());
    });

})
</script>
</body>
</html>